<template>
  <view class="mui-navbar" :style="{ height: navbarHeight }">
    <view class="mui-navbar__content"
          :class="{ 'mui-navbar__fixed': conf.fixed, 'mui-backdrop-filter': conf.blurEffect, 'mui-navbar__shadow': conf.shadow, 'mui-navbar__border': conf.border }"
          :style="{ 'background-color': !bgIsLine ? backgroundColorRgba : '', 'background-image': bgIsLine ? backgroundColorRgba : '', 'height': navbarHeight, 'color': txtColor }"
    >
      <view v-if="backgroundImage" class="mui-navbar__content__imgctn" :style="{ opacity: bgImgTransparent[1] }">
        <image class="mui-navbar-img" :style="{ height: navbarHeight }" :src="backgroundImageEnd" mode="scaleToFill" />
      </view>
      <view v-if="backgroundImage" class="mui-navbar__content__imgctn" :style="{ opacity: bgImgTransparent[0] }">
        <image class="mui-navbar-img" :style="{ height: navbarHeight }" :src="backgroundImage" mode="scaleToFill" />
      </view>
      <!-- #ifndef H5 -->
      <!-- 状态栏 -->
      <status-bar v-if="conf.statusBar" :backgroud="statusBarBackground || ''" />
      <!-- #endif -->
      <!-- 小程序分开编译 -->
      <!-- #ifdef MP -->
      <view class="mui-navbar__content__main"
            :style="{ height: `${conf.height}px`, fontSize: conf.fontSize, maxWidth: `calc(100vw - ${jnWidth}px - 13px)` }"
      >
        <!-- #endif -->

        <!-- #ifndef MP -->
        <view class="mui-navbar__content__main" :style="{ height: `${conf.height}px`, fontSize: conf.fontSize }">
          <!-- #endif -->
          <view class="mui-navbar__top-white-space" :style="{ height: `${conf.topWhiteHeight}px` }" />
          <view class="mui-navbar__content-wrap">
            <!-- 不是app的时候中返回和left在前面 -->
            <!-- #ifndef APP-PLUS-NVUE -->
            <view v-if="conf.back" class="mui-navbar__content__main_back" @tap="onBack">
              <uni-icons :color="txtColor" type="back" size="26" class="mui-navbar__icon"
                         :class="{ 'mui-navbar__icontran': bgTransparent === 0 }"
              />
              <text v-if="conf.backTxt" class="mui_font_size" :style="{ color: txtColor }">
                {{ conf.backTxt }}
              </text>
            </view>
            <view v-if="conf.leftSlot" class="mui-navbar__content__main_left" style="padding: 0;margin:0 13px 0 0;">
              <slot v-if="conf.leftSlotSwitch && slotSwitchOpacity === 0" name="leftSwitch"></slot>
              <slot v-else name="left"></slot>
            </view>
            <view v-if="conf.leftButton"
                  class="mui-navbar__content__main_left" :style="{ padding: conf.back || conf.leftSlot ? '0' : '0 9px 0 13px;' }"
            >
              <block v-for="(btn, index) in conf.leftButton" :key="index">
                <view class="mui-navbar__content__main_left_btn" :class="{ 'mui-navbar__btntran': bgTransparent === 0 }"
                      @tap="onClickBtn(btn)"
                >
                  <text v-if="btn.position && btn.position === 'left'" class="mui-navbar__icon"
                        :style="{ color: btn.color ? btn.color : txtColor, marginRight: btn.txt ? '2px' : '0' }"
                  >
                    {{ btn.icon }}
                  </text>
                  <text v-if="btn.txt"
                        class="mui-navbar__content__main_lefticon_txt mui_font_size" :style="{ color: btn.color ? btn.color : txtColor }"
                  >
                    {{ btn.txt }}
                  </text>
                  <text v-if="!btn.position || btn.position !== 'left'" class="mui-navbar__icon"
                        :style="{ color: btn.color ? btn.color : txtColor, marginLeft: btn.txt ? '2px' : '0' }"
                  >
                    {{ btn.icon }}
                  </text>
                </view>
              </block>
            </view>
            <!-- #endif -->

            <view v-if="!conf.search && !conf.maxSlot" class="mui-navbar__content__main_center">
              <view class="mui-navbar__content__main_center_flex" />
              <view class="mui-navbar__content__main_center_txt">
                <text v-if="!conf.centerSlot && title" class="mui_font_size mui_text_overflow"
                      :style="{ color: txtColor }"
                >
                  {{ title }}
                </text>

                <slot v-if="conf.centerSlotSwitch && slotSwitchOpacity === 0" name="centerSwitch"></slot>
                <slot v-else name="center"></slot>
              </view>
              <view class="mui-navbar__content__main_center_flex" />
            </view>

            <view v-if="!conf.search && conf.maxSlot" class="mui-navbar__content__main_center" style="overflow: hidden">
              <slot v-if="conf.maxSlotSwitch && slotSwitchOpacity === 0" name="maxSwitch"></slot>
              <slot v-else name="max"></slot>
            </view>

            <!-- #ifdef APP-PLUS-NVUE -->
            <view v-if="conf.back" class="mui-navbar__content__main_back" @tap="onBack">
              <slot name="backBtn">
                <uni-icons :color="txtColor" type="back" class="mui-navbar__icon"
                           :class="{ 'mui-navbar__icontran': bgTransparent === 0 }"
                />
              </slot>
              <text v-if="conf.backTxt" class="mui_font_size" :style="{ color: txtColor }">
                {{ conf.backTxt }}
              </text>
            </view>
            <view v-if="conf.leftSlot" class="mui-navbar__content__main_left" style="padding: 0;margin:0 13px 0 0;">
              <slot v-if="conf.leftSlotSwitch && slotSwitchOpacity === 0" name="leftSwitch"></slot>
              <slot v-else name="left"></slot>
            </view>
            <view v-if="conf.leftButton"
                  class="mui-navbar__content__main_left" :style="{ padding: conf.back || conf.leftSlot ? '0' : '0 9px 0 13px;' }"
            >
              <block v-for="(btn, index) in conf.leftButton" :key="index">
                <view class="mui-navbar__content__main_left_btn" :class="{ 'mui-navbar__btntran': bgTransparent === 0 }"
                      @tap="onClickBtn(btn)"
                >
                  <text v-if="btn.position && btn.position === 'left'" class="mui-navbar__icon"
                        :style="{ color: btn.color ? btn.color : '', marginRight: btn.txt ? '2px' : '0' }"
                  >
                    {{ btn.icon }}
                  </text>
                  <text v-if="btn.txt"
                        class="mui-navbar__content__main_lefticon_txt mui_font_size" :style="{ color: btn.color ? btn.color : txtColor }"
                  >
                    {{ btn.txt }}
                  </text>
                  <text v-if="!btn.position || btn.position !== 'left'" class="mui-navbar__icon"
                        :style="{ color: btn.color ? btn.color : '', marginLeft: btn.txt ? '2px' : '0' }"
                  >
                    {{ btn.icon }}
                  </text>
                </view>
              </block>
            </view>
            <!-- #endif -->

            <view v-if="conf.search"
                  class="mui-navbar_search"
                  :style="{ 'padding-left': conf.leftButton ? '9px' : '13px', 'padding-right': conf.rightButton ? '9px' : '13px' }" @click="searchClick"
            >
              <slot name="searchIcon">
                <uni-icons :color="conf.searchColor" type="search" class="mui-navbar_search_icon" />
              </slot>
              <input type="text" class="mui-navbar_search_input mui_font_size" placeholder-style="color:#dbdbdb;"
                     confirm-type="search" :value="conf.search.value"
                     :placeholder="conf.search.placeholder ? conf.search.placeholder : '请输入搜索内容'"
                     :disabled="conf.search.disabled" @confirm="searchConfirm"
              />
            </view>

            <!-- #ifndef MP -->
            <view v-if="!conf.search" class="" style="flex: 1;" />
            <!-- #endif -->

            <view v-if="conf.rightButton" class="mui-navbar__content__main_right"
                  :style="{ padding: conf.rightSlot ? '0' : '0 13px 0 9px;' }"
            >
              <block v-for="(btn, index) in conf.rightButton" :key="index">
                <view class="mui-navbar__content__main_right_btn" :class="{ 'mui-navbar__btntran': bgTransparent === 0 }"
                      @tap="onClickBtn(btn)"
                >
                  <text v-if="btn.position && btn.position === 'left'"
                        class=" mui-navbar__content__main_right_icon mui-navbar__icon"
                        :style="{ color: btn.color ? btn.color : '', marginRight: btn.txt ? '2px' : '0' }"
                  >
                    {{ btn.icon }}
                  </text>
                  <text v-if="btn.txt"
                        class="mui-navbar__content__main_right_txt mui_font_size" :style="{ color: btn.color ? btn.color : txtColor }"
                  >
                    {{ btn.txt }}
                  </text>
                  <text v-if="!btn.position || btn.position !== 'left'"
                        class=" mui-navbar__content__main_right_icon mui-navbar__icon"
                        :style="{ color: btn.color ? btn.color : '', marginLeft: btn.txt ? '2px' : '0' }"
                  >
                    {{ btn.icon }}
                  </text>
                </view>
              </block>
            </view>
            <view v-if="conf.rightSlot" class="mui-navbar__content__main_right" style="padding: 0;margin: 0;">
              <slot v-if="conf.rightSlotSwitch && slotSwitchOpacity === 0" name="rightSwitch"></slot>
              <slot v-else name="right"></slot>
            </view>
          </view>
        </view>
      </view>
      <!-- 占位符，一般都需要 -->
      <view v-if="conf.barPlaceholder && conf.fixed">
        <status-bar v-if="conf.statusBar" />
        <view :style="{ height: `${conf.height}px` }" />
      </view>
      <!-- 占位区域 end -->
    </view>
  </view>
</template>

<script>
import { getWindow } from '../../lib/function/index'
import StatusBar from './status-bar.vue'

export default {
  name: 'MuiNavbar',
  components: {
    StatusBar
  },
  props: {
    navBarConfig: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      title: '',
      backgroundColorRgba: '',
      backgroundColorRgb: 'rgb(222,222,222)',
      backgroundImage: null,
      backgroundImageEnd: null,
      // 当前使用文字颜色
      txtColor: '#333333',
      // 背景颜色过度数组
      bgArr: [],
      // 文字颜色过度数组
      colorArr: [],
      // 状态栏颜色
      statusBarBackground: '',
      // 背景透明
      bgTransparent: 1,
      // 背景图片透明
      bgImgTransparent: [1, 1],
      // 小程序 胶囊宽度
      jnWidth: 0,
      // 背景颜色是否为线性渐变
      bgIsLine: false,
      // 插槽过度透明度
      slotSwitchOpacity: 1,

      // 默认设置
      conf: {
        // 标题
        title: '',
        // nav 高度
        height: 44,

        // 是否固定头部
        fixed: true,
        // 是否包含状态栏
        statusBar: true,
        // 状态栏字体颜色，只支持黑（#000000）和白（#FFFFFF）两种颜色。为数组则是滑动变色
        statusBarFontColor: '#000000',
        topWhiteHeight: 0, // tabbar到statusbar之间占位高度
        // 状态栏背景颜色
        statusBarBackground: null,

        // 字体大小
        fontSize: '18px',
        // 文字颜色，可以数组和string，为数组则是滑动变色 ["#000000","#ff9900"]
        color: '#333333',
        blurEffect: true,
        // 背景颜色;参数一：透明度;参数二：背景颜色（array则为线性渐变，string为单色背景）、
        // [1,['#24bdab','#80c54c']]
        backgroundColor: [1, '#ffffff'],
        // 背景图片（array则为滑动切换背景图，string为单一背景图）
        // 普通背景
        // ['/static/xj.jpg']
        // 切换功能参数说明：第一张图片，第二张图，第一张图透明度，第二张图透明度
        // ['/static/xj.jpg','/static/xk.jpg',1,1]
        backgroundImg: null,

        // 线性渐变角度
        backgroundColorLinearDeg: 'to right',
        // 滑动距离
        slideHeight: 100,
        // 滑动后背景颜色;参数一：透明度;参数二：背景颜色（array则为线性渐变，string为单色背景）
        slideBackgroundColor: null,

        // 是否需要返回按钮
        back: true,
        // 返回文本 '返回',小程序无效
        backTxt: null,
        // 返回tab页面
        backTabPage: null,
        // 返回普通页面
        backPage: null,

        // 左侧按钮组，icon参数为必填
        leftButton: null,
        // 右侧按钮组，icon参数为必填
        rightButton: null,
        // rightButton:[{
        // key: 'address',  // 标识，方便事件识别是哪一个按钮触发
        //  icon: '&#xe64b;', // 图标代码
        // txt: '文本',   // 文本，常用于城市选择
        //  color: '#ff9900', // 图标颜色
        //  position: 'left', // 图标居于文字left 或 right
        // },{
        // key: 'address',  // 标识，方便事件识别是哪一个按钮触发
        //  icon: '&#xe650;',
        //  txt: '文本',
        //  color: '#894574',
        // },]
        // 搜索框
        search: null,
        // search: {
        //  value:'',
        //  placeholder: '',
        //  disabled: false
        // }
        // 阴影
        shadow: false,
        // 底边框
        border: false,
        // 导航栏占位符
        barPlaceholder: true,

        // 插槽滑动切换
        slotSwitch: 0,
        // 右插槽
        rightSlot: false,
        // 右插槽切换
        rightSlotSwitch: false

      }
    }
  },
  computed: {
    // 获取系统状态栏高度
    statusBarHeight() {
      const sysInfo = getWindow()
      return sysInfo.statusBarHeight
    },
    navbarHeight() {
      return `${this.statusBarHeight + this.conf.height}px`
    }
  },

  created() {
    // 小程序胶囊按钮长度
    // #ifdef MP-WEIXIN || MP-QQ || MP-BAIDU || MP-TOUTIAO
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.jnWidth = menuButtonInfo.width
    // #endif
    // #ifdef MP-ALIPAY
    this.jnWidth = 87
    // #endif

    this.init()
  },
  methods: {
    init() {
      // 参数合并
      this.conf = Object.assign(this.conf, this.navBarConfig)

      // 标题
      if (Array.isArray(this.conf.title)) {
        this.title = this.conf.title[0]
      }
      else {
        this.title = this.conf.title
      }

      if (this.title !== '') {
        uni.setNavigationBarTitle({
          title: this.title
        })
      }

      // 状态栏背景颜色
      if (Array.isArray(this.conf.statusBarBackground)) {
        this.statusBarBackground = this.conf.statusBarBackground[0]
      }
      else {
        this.statusBarBackground = this.conf.statusBarBackground
      }

      // 状态栏文字颜色
      if (this.conf.statusBarFontColor) {
        uni.setNavigationBarColor({
          frontColor: Array.isArray(this.conf.statusBarFontColor)
            ? this.conf
              .statusBarFontColor[0]
            : this.conf.statusBarFontColor,
          backgroundColor: '#000000'
        })
      }

      // 文字颜色
      if (Array.isArray(this.conf.color)) {
        this.txtColor = this.conf.color[0]
        this.colorArr = this.gradientColor(this.conf.color[0], this.conf.color[1], this.conf.slideHeight)
      }
      else {
        this.txtColor = this.conf.color
      }

      // 背景图片存在时，背景色不生效
      if (this.conf.backgroundImg) {
        let img = ''
        if (Array.isArray(this.conf.backgroundImg)) {
          img = this.conf.backgroundImg[0]
          if (this.conf.backgroundImg.length > 2) {
            this.bgTransparent = this.conf.backgroundImg[2]
          }
        }
        else {
          img = this.conf.backgroundImg
          this.bgTransparent = 1
        }
        this.backgroundImage = this.bgImgStringHandle(img)
      }

      // 背景颜色设置
      if (this.conf.backgroundColor) {
        const transparent = this.conf.backgroundColor[0]
        const background = this.conf.backgroundColor[1]
        if (Array.isArray(background)) {
          // 为线性背景
          this.bgIsLine = true
        }
        if (this.conf.slideBackgroundColor) {
          const backgroundEnd = this.conf.slideBackgroundColor[1]
          this.bgArr = []
          if (Array.isArray(background)) {
            for (let i = 0; i < background.length; i++) {
              this.bgArr.push(this.gradientColor(background[i], backgroundEnd[i], this.conf
                .slideHeight))
            }
          }
          else {
            this.bgArr.push(this.gradientColor(background, backgroundEnd, this.conf.slideHeight))
          }
        }
        this.bgTransparent = transparent

        this.setBgColor(background, transparent)
      }
    },
    // 返回
    onBack() {
      // tabbar 页面
      if (this.conf.backTabPage) {
        uni.switchTab({
          url: this.conf.backTabPage
        })
      }
      else if (this.conf.backPage) {
        // 普通页面
        uni.redirectTo({
          url: this.conf.backPage
        })
      }
      else if (getCurrentPages().length > 1) {
        uni.navigateBack()
      }
      else {
        // #ifdef H5
        history.back()
        // #endif
      }
    },
    onClickBtn(e) {
      this.$emit('clickBtn', e)
    },
    pageScroll(e) {
      const st = Number.parseFloat(e.scrollTop.toFixed(2))
      // 滑动距离
      const slideHeight = this.conf.slideHeight
      // 过度颜色数组用到的整数滑动距离
      let a = Math.round(st)
      if (a > 0) {
        a -= 1
      }
      else {
        a = 0
      }

      // 标题
      if (Array.isArray(this.conf.title)) {
        if (st <= slideHeight) {
          this.title = this.conf.title[0]
        }
        else {
          this.title = this.conf.title[1]
        }
      }

      // 文字颜色滑动变色
      if (Array.isArray(this.conf.color)) {
        const colorArr = this.colorArr
        const colorData = []
        const rgb = (a <= colorArr.length - 1) ? colorArr[a] : colorArr[colorArr.length - 1]

        this.txtColor = rgb
      }

      this.slotSwitchOpacity = this.transHandle(st, slideHeight, 1, 0)

      // ---------------------  状态栏文字滑动变色  ----------------------------
      //  参数为数组的时候生效
      if (Array.isArray(this.conf.statusBarFontColor)) {
        // 滑动前 状态栏文字颜色
        if (st <= slideHeight) {
          uni.setNavigationBarColor({
            frontColor: this.conf.statusBarFontColor[0],
            backgroundColor: '#ffffff'
          })
        }
        else {
          uni.setNavigationBarColor({
            frontColor: this.conf.statusBarFontColor[1],
            backgroundColor: '#ffffff'
          })
        }
      }

      // 状态栏背景颜色
      if (Array.isArray(this.conf.statusBarBackground)) {
        if (st <= slideHeight) {
          this.statusBarBackground = this.conf.statusBarBackground[0]
        }
        else {
          this.statusBarBackground = this.conf.statusBarBackground[1]
        }
      }

      // ---------------------  状态栏滑动变色 END --------------------------

      // --------------------- 背景图片  ---------------------------
      const BI = this.conf.backgroundImg
      if (Array.isArray(this.conf.backgroundImg)) {
        const BIL = BI.length
        this.bgTransparent = BIL <= 3 ? 1 : this.transHandle(st, slideHeight, BI[2], BI[3])
        this.bgImgTransparent[0] = BIL <= 3 ? 1 : this.transHandle(st, slideHeight, BI[2], 0)
        this.bgImgTransparent[1] = BI[3]
        let img = ''
        if (st <= slideHeight) {
          img = BI[0]
        }
        else {
          img = BI[1]
        }
        this.backgroundImage = this.bgImgStringHandle(BI[0])
        this.backgroundImageEnd = this.bgImgStringHandle(BI[1])
      }

      // --------------------- 背景颜色  ---------------------------

      if (this.conf.slideBackgroundColor) {
        const bgArr = this.bgArr
        const bgData = []
        for (let i = 0; i < this.bgArr.length; i++) {
          const rgb = (a <= bgArr[i].length - 1) ? bgArr[i][a] : bgArr[i][bgArr[i].length - 1]
          bgData.push(rgb.replace(/(?:\(|\)|rgb|RGB)*/g, '').split(','))
        }
        // 透明度
        const transparentStart = this.conf.backgroundColor[0]
        const transparentEnd = this.conf.slideBackgroundColor[0]
        let transparent = transparentEnd
        if (st <= slideHeight) {
          // 透明度差值
          const cVal = Math.abs(transparentEnd - transparentStart)
          // 每1像素的透明度
          const tVal = Number.parseFloat(cVal / slideHeight).toFixed(4)
          // 滑动后透明度的插值
          const curVal = Number.parseFloat(tVal * st).toFixed(2)
          transparent = transparentStart > transparentEnd
            ? (transparentStart - curVal)
            : transparentStart
              + curVal
          transparent = Number.parseFloat(transparent).toFixed(2)
          // if(transparent>0 && transparent<1){transparent = transparent.toFixed(2)}
        }
        const backgroundEnd = this.conf.slideBackgroundColor[1]
        let rgbStr = ''
        if (Array.isArray(this.conf.backgroundEnd)) {
          rgbStr = `linear-gradient(${this.conf.backgroundColorLinearDeg},`
          const l = bgData.length
          for (let i = 0; i < bgData.length; i++) {
            const c = bgData[i]
            rgbStr += `rgba(${c[0]},${c[1]},${c[2]},${transparent})`
            if (l !== (i * 1) + 1) {
              rgbStr += ','
            }
          }
          rgbStr += ')'
        }
        else {
          rgbStr = `rgba(${bgData[0][0]},${bgData[0][1]},${bgData[0][2]},${transparent
          })`
        }
        this.bgTransparent = transparent
        this.backgroundColorRgba = rgbStr
      }
      // ---------------------- 背景颜色 EDN -------------------------
    },
    // 透明度计算，
    // 起始位置，结束位置，起始透明度，目标透明度
    transHandle(hStart, hEnd, tStart, tEnd) {
      let transparent = tEnd
      if (hStart <= hEnd) {
        // 透明度差值
        const cVal = Math.abs(tEnd - tStart)
        // 每1像素的透明度
        const tVal = Number.parseFloat(cVal / hEnd).toFixed(4)
        // 滑动后透明度的插值
        const curVal = Number.parseFloat(tVal * hStart).toFixed(2)
        transparent = tStart > tEnd ? (tStart - curVal) : tStart + curVal
        transparent = Number.parseFloat(transparent).toFixed(2)
        // if(transparent>0 && transparent<1){transparent = transparent.toFixed(2)}
      }
      return transparent
    },
    // 起始颜色，结束颜色，过渡数量
    gradientColor(startColor, endColor, step) {
      const startRGB = this.colorRgb(startColor) // 转换为rgb数组模式
      const startR = startRGB[0]
      const startG = startRGB[1]
      const startB = startRGB[2]
      const endRGB = this.colorRgb(endColor)
      const endR = endRGB[0]
      const endG = endRGB[1]
      const endB = endRGB[2]
      const sR = (endR - startR) / step // 总差值
      const sG = (endG - startG) / step
      const sB = (endB - startB) / step
      const colorArr = []
      for (let i = 0; i < step; i++) {
        // 计算每一步的hex值
        const str = `rgb(${Number.parseInt((sR * i + startR))},${Number.parseInt((sG * i + startG))},${Number.parseInt((
          sB * i + startB
        ))})`
        const hex = this.colorHex(str)
        colorArr.push(hex)
      }
      return colorArr
    },
    // 转换函数
    colorRgb(sColor) {
      const reg = /^#([0-9A-f]{3}|[0-9A-f]{6})$/
      sColor = sColor.toLowerCase()
      if (sColor && reg.test(sColor)) {
        if (sColor.length === 4) {
          let sColorNew = '#'
          for (let i = 1; i < 4; i += 1) {
            sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
          }
          sColor = sColorNew
        }
        // 处理六位的颜色值
        const sColorChange = []
        for (let i = 1; i < 7; i += 2) {
          sColorChange.push(Number.parseInt(`0x${sColor.slice(i, i + 2)}`))
        }
        return sColorChange
      }
      else {
        return sColor
      }
    },

    colorHex(rgb) {
      const reg = /^#([0-9A-f]{3}|[0-9A-f]{6})$/
      if (/^(rgb|RGB)/.test(rgb)) {
        const aColor = rgb.replace(/(?:(|)|rgb|RGB)*/g, '').split(',')
        let strHex = '#'
        for (let i = 0; i < aColor.length; i++) {
          let hex = Number(aColor[i]).toString(16)
          hex = hex < 10 ? `${0}${hex}` : hex // 保证每个rgb的值为2位
          if (hex === '0') {
            hex += hex
          }
          strHex += hex
        }
        if (strHex.length !== 7) {
          strHex = rgb
        }
        return strHex
      }
      else if (reg.test(rgb)) {
        const aNum = rgb.replace(/#/, '').split('')
        if (aNum.length === 6) {
          return rgb
        }
        else if (aNum.length === 3) {
          let numHex = '#'
          for (let i = 0; i < aNum.length; i += 1) {
            numHex += (aNum[i] + aNum[i])
          }
          return numHex
        }
      }
      else {
        return rgb
      }
    },
    // 背景颜色初始化
    // 透明度，背景颜色string ，array
    setBgColor(background, transparent) {
      // 背景颜色
      if (Array.isArray(background)) {
        let rgbStr = `linear-gradient(${this.conf.backgroundColorLinearDeg},`
        let c = null
        for (let i = 0; i < background.length; i++) {
          c = background[i]
          const o = this.colorRgb(c)
          rgbStr += `rgba(${o[0]}, ${o[1]}, ${o[2]}, ${transparent})`
          if (background.length !== (i * 1) + 1) {
            rgbStr += ','
          }
        }
        rgbStr += ')'
        this.backgroundColorRgba = rgbStr
      }
      else {
        if (this.conf.blurEffect) {
          this.backgroundColorRgba = 'rgba(250,250,250,.8)'
          return
        }
        const c = background
        const o = this.colorRgb(c)
        this.backgroundColorRgba = `rgba(${o[0]}, ${o[1]}, ${o[2]}, ${transparent})`
      }
    },
    bgImgStringHandle(img) {
      return img
    },
    // 搜索框，点击完成时触发
    searchConfirm(event) {
      this.$emit('searchConfirm', event.detail)
    },
    // 搜索框点击事件
    searchClick(event) {
      this.$emit('searchClick', true)
    }
  }
}
</script>

<style lang="scss">
.mui-navbar {
  width: 750rpx;
  display: flex;
  position: relative;
  padding-top: 0;
  overflow: hidden;
}

.mui-navbar__content {
  display: flex;
  position: relative;
  flex: 1;
  z-index: 1;
  width: 750rpx;
  flex-direction: column;
}

.mui-backdrop-filter {
  backdrop-filter: blur(20rpx);
}

.mui-navbar__icontran {
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  transition:
    color,
    background 0.2s;
}

.mui-navbar__btntran {
  padding: 0;
  margin-left: 6px;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #ffffff;
  transition:
    color,
    background 0.2s;
}

.mui-navbar__content__imgctn {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex: 1;
  z-index: 2;
}

.mui-navbar-img {
  width: 750rpx;
}

.mui-navbar__content__main {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  flex-direction: column;
  // align-items: center;
  padding: 0;
}

.mui-navbar__top-white-space {
  display: flex;
}

.mui-navbar__content-wrap {
  display: flex;
  position: relative;
  flex: 1;
}

.mui-navbar__content__main_back {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0 13px;
  margin: 0;
  position: relative;
  z-index: 2;
}

.mui-navbar_search {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  flex: 1;
  height: 100%;
}

.mui-navbar_search_icon {
  position: absolute;
  left: 24px;
  font-size: 18px;
  color: #dbdbdb;
}

.mui-navbar_search_input {
  display: flex;
  height: 30px;
  flex: 1;
  border-radius: 40px;
  background-color: rgba(32, 32, 32, 0.35);
  padding: 0 16px 0 36px;
}

.mui-navbar__content__main_right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0 13px 0 9px;
  margin: 0;
}

.mui-navbar__content__main_right_txt {
  max-width: 60px;
  lines: 1;
  text-overflow: ellipsis;
}

.mui-navbar__content__main_right_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0 5px;
}

.mui-navbar__content__main_right_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.mui-navbar__content__main_center {
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: stretch;
  /* #ifdef MP */
  width: 0;
  justify-content: left;
  /* #endif */
  /* #ifndef MP */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  justify-content: center;
  /* #endif */
}

.mui-navbar__content__main_center_txt {
  display: flex;
  flex-direction: row;
  /* #ifndef MP */
  flex: 46;
  /* #endif */
  /* #ifdef APP-NVUE */
  lines: 1;
  /* #endif */
  /* #ifndef APP-NVUE */
  // display: block;
  white-space: nowrap;
  overflow: hidden;
  /* #endif */
  justify-content: center;
  align-items: center;
  text-align: center;
  text-overflow: ellipsis;
}

.mui-navbar__content__main_center_flex {
  display: flex;
  /* #ifndef MP */
  flex: 32;
  /* #endif */
  /* #ifdef MP */
  width: 0;
  /* #endif */
}

.mui-navbar__content__main_left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0 9px 0 13px;
  margin: 0;
}

.mui-navbar__content__main_left_txt {
  width: 60px;
  lines: 1;
  text-overflow: ellipsis;
}

.mui-navbar__content__main_left_btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  padding: 0 5px;
}

.mui-navbar__fixed {
  position: fixed;
  top: 0;
  z-index: 99;
}

.mui-navbar__icon {
  font-size: 20px;
}

.mui-navbar__shadow {
  box-shadow: 0 2rpx 12rpx #ccc;
}

.mui-navbar__border:after {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleY(0.5);
  background-color: #efefef;
}

.mui_font_size {
  font-size: 36rpx;
}

.mui_text_overflow {
  /* #ifdef APP-NVUE */
  display: flex;
  flex: 1;
  lines: 1;
  justify-content: center;
  align-items: center;
  /* #endif */
  /* #ifndef APP-NVUE */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  /* #endif */
  text-overflow: ellipsis;
  text-align: center;
}
</style>
